*{
    padding:0;
    margin:0;
}
li{
    list-style: none;
}
html,body{
    height:100%
}
body{
    background: #000d4a url(../imgs/bg.jpg) center top;
    display:flex;
    flex-direction: column;
}

header{
    height: 1.05rem;
    background: url(../imgs/head_bg.png) no-repeat center center;
    position: relative;
     color: #fff;
    h1{
           
        text-align: center;
        font-size: .5rem;
        line-height: .9rem;
    }
    span{
        position:absolute;
        top: .2rem;
        font-size: .3rem;
        right:.2rem;

    }
    
}
.main{
    flex:1;
    margin-top:.3rem;
    display:flex;
    justify-content: space-between;
    padding:0 .2rem;
    .column{
        width:24%;
        // background-color: red;
        &:nth-of-type(2){
            width:50%;
            // background-color: yellow;
        }
        .box{
            
            padding:.15rem;
            margin-bottom:.2rem;
            background-color: rgba(0, 0, 0, .2);
            
        }
    }
}
.left2{
    color:#fff;
    overflow: hidden;
    position:relative;
    
    .navboxall{
             
        position:absolute;
        margin:auto;
        .wraptit{
            border-bottom:1px solid rgba(255, 255, 255, .2);
            padding:0 0 .1rem 0;
            margin-bottom:.1rem;
            span {
                padding: 0 .1rem;
                font-size: .26rem;

                &:nth-of-type(1) {
                    width: 30%
                }

                &:nth-of-type(2) {
                    width: 20%
                }

                &:nth-of-type(3) {
                    width: 20%
                }

                &:nth-of-type(4) {
                    width: 30%
                }
            }
        }
        .str_wrap{
            overflow:hidden;
            width:100%;
            position:relative;
            white-space: nowrap;
        
            li{
                line-height:.4rem /* 40/100 */;
                height:.4rem /* 40/100 */;
           span {
               padding: 0 .1rem;
               font-size: .26rem;

               &:nth-of-type(1) {
                   width: 30%
               }

               &:nth-of-type(2) {
                   width: 20%
               }

               &:nth-of-type(3) {
                   width: 20%
               }

               &:nth-of-type(4) {
                   width: 30%
               }
           }
            }
            
        }
    }
}
.table1{
    tbody{
        tr{
            th {
            border-bottom: 1px solid rgba(255, 255, 255, .2);
            font-size: .16rem;
            color: rgba(255, 255, 255, .6);
            font-weight: normal;
            padding: 0 0 .1rem 0;
            }

            td {
            font-size: .16rem;
            color: rgba(255, 255, 255, .4);
            padding: .15rem 0 0 0;

            span {
            width: .24rem;
            height: .24rem;
            border-radius: 3px;
            display: block;
            background: red;
            color: #fff;
            line-height: .24rem;
            text-align: center;
            }
            }
        }
    }
    
    
}
.table2 {
    th {
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        font-size: .16rem;
        color: rgba(255, 255, 255, .6);
        font-weight: normal;
        padding: 0 0 .1rem 0;
    }

    td {
        font-size: .16rem;
        color: rgba(255, 255, 255, .4);
        padding: .15rem 0 0 0;

        span {
            width: .24rem;
            height: .24rem;
            border-radius: 3px;
            display: block;
            background: red;
            color: #fff;
            line-height: .24rem;
            text-align: center;
        }
    }
}